import React from "react";
import { Menu } from "antd";
import { ItemType } from "antd/es/menu/hooks/useItems";
import { Route_List } from "../../router/routes";
import { useLocation, useNavigate } from "react-router-dom";

const MenuNav: React.FC = () => {
  const role = localStorage.getItem('role')
  // 菜单内容
  const items: ItemType[] = Route_List.filter(({ hidden, roles }) => {
    // hidden 说明需要隐藏 返回false 筛选掉即可
    if (hidden) return false;
    // 筛选是否需要权限
    if(roles) return roles.includes(role as string) 
    // 其他情况默认返回true
    return true;
  }).map((v) => {
    // 数据转换
    return {
      key: v.path,
      label: v.title,
    };
  });
  // 获取访问路径--路由hooks
  const { pathname } = useLocation();
  // 获取跳转路由的方法
  const navigate = useNavigate()
  return (
    <div>
      <Menu
        items={items}
        theme="dark"
        selectedKeys={[pathname]}
        onClick={({ key }) => {
          // 跳转页面---路由hooks
          navigate(key)
        }}
      ></Menu>
    </div>
  );
};

export default MenuNav;
